<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 康复评估
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.hospitalId" placeholder="医院ID" class="handle-input mr10" @keyup.enter.native="handleSearch"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="ptId" label="患者ID" width="240" align="center"></el-table-column>
                <el-table-column prop="ptNm" label="姓名" align="center"></el-table-column>
                <el-table-column prop="ptAge" label="年龄" align="center" sortable></el-table-column>
                <el-table-column prop="ptSexText" label="性别" align="center"></el-table-column>
                <el-table-column prop="ptDoctor" label="主治医生" align="center"></el-table-column>
                <el-table-column prop="assCrtTm" label="创建时间" width="180" align="center" sortable></el-table-column>
                <el-table-column prop="hospitalId" label="医院ID" align="center"></el-table-column>
                <el-table-column prop="hospitalSystemId" label="机器编号" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-thumb"
                                @click="handleEdit(scope.$index, scope.row)"
                        >查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="评估信息" :visible.sync="editVisible" width="50%" :before-close="seeColse">
            <div style="margin-bottom: 10px;">
                <el-form label-width="70px">
                    <el-row style="margin-top: 10px">
                        <el-col :span="10" style="margin-left: 15px">
                            <span style="font-size: 20px;margin-bottom: 10px">患者ID： {{assessptId}}</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="font-size: 20px;margin-bottom: 10px">姓名：{{assessptNm}}</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="font-size: 20px;margin-bottom: 10px">性别： {{assessptSexText}}</span>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-tabs v-model="assesstableTabsValue" type="card">
                <el-tab-pane v-if="assesstableTabs && assesstableTabs.length >=0"
                             v-for="(item, index) in assesstableTabs"
                             :key="item.name"
                             :label="item.title"
                             :name="item.name">
                    <component :is="item.content"   v-bind:modelForm="item.contentForm" ></component>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                   <el-button @click="firstSee">打印预览</el-button>
                                <el-button @click="seeColse">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="预览信息" :visible.sync="visible" width="50%" :before-close="closeEdit">
            <el-button v-print="'#print'">打 印</el-button>
            <el-button @click="closeEdit">关 闭</el-button>
            <div id="print" >
                <el-row style="margin-top: 10px">
                    <el-col :span="12" style="margin-left: 15px">
                        <span style="font-size: 25px;margin-bottom: 10px">患者ID： {{assessptId}}</span>
                    </el-col>
                    <el-col :span="4">
                        <span style="font-size: 25px;margin-bottom: 10px">姓名：{{assessptNm}}</span>
                    </el-col>
                    <el-col :span="4">
                        <span style="font-size: 25px;margin-bottom: 10px">性别： {{assessptSexText}}</span>
                    </el-col>
                </el-row>
                <el-table style="margin-top: 20px;font-size: 20px;width: 700px"
                          :data="printData"
                          border
                          class="table"
                >
                    <el-table-column prop="type" label="评估类别" width="170px" align="center"></el-table-column>
                    <el-table-column prop="value" label="评估结果" align="center" width="500px"></el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    import { assessData,selectByAssessId } from '../../../api/assess/assess';
    import assessOneModel from '../assess/seeOneModel';
    import assessTwoModel from '../assess/seeTwoModel';
    import assessThreeModel from '../assess/seeThreeModel';
    import assessForeModel from '../assess/seeForeModel';
    export default {
        name: 'user',
        data() {
            return {
                query: {
                    hospitalId: '',
                    userAcct:localStorage.getItem('ms_userAcct'),
                    pageIndex: 1,
                    pageSize: 10
                },
                printData:[],
                tableData: [],
                multipleSelection: [],
                editVisible: false,
                pageTotal: 0,
                editForm: {},
                idx: -1,
                id: -1,
                assessptId:'',
                assessptNm:'',
                assessptSexText:'',
                assesstableTabsValue: '1',
                assesstableTabs: [],
                assesstabIndex: 1,
                visible:false
            };
        },
        created() {
            this.getData();
        },
        components:{
            assessOneModel,
            assessTwoModel,
            assessThreeModel,
            assessForeModel
        },
        methods: {
            // 获取后台数据
            getData() {
                console.log("this.query",this.query);
                assessData(this.query).then(res => {
                    if (res.success == true){
                        this.tableData = res.data;
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 触发重置按钮
            handleReset() {
                this.query.hospitalId = "";
                this.getData();
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 查看操作
            handleEdit(index, row) {
                this.assessptId=row.ptId;
                this.assessptNm=row.ptNm;
                this.assessptSexText=row.ptSexText;
                this.assesstableTabsValue="1";
                this.assesstabIndex=1;
                //根据评估id查询评估信息
                selectByAssessId({assId: row.assId}).then(res => {
                    if (res.success==true){
                        //肌力评估级别
                        let assMuscle="";
                        if (res.data.assMuscle=="00"){
                            assMuscle="0级：未触及肌肉收缩";
                        }else if(res.data.assMuscle=="01"){
                            assMuscle="1级：可触及肌肉在收缩，但不能引起关节在收缩";
                        }else if(res.data.assMuscle=="02"){
                            assMuscle="2级：在去重力状态下，能完成全关节活动范围的运动";
                        }else if(res.data.assMuscle=="03"){
                            assMuscle="3级：在抗重力状态下能完成全关节活动范围，但不能抗阻";
                        }else if(res.data.assMuscle=="04"){
                            assMuscle="4级：能抗重力和轻度阻力状态下完成全关节活动范围";
                        }else if (res.data.assMuscle=="05"){
                            assMuscle="5级：能抗重力和最大阻力状态下完成全关节活动范围";
                        };
                        //Brunstrom评估
                        let assBrunstrom="";
                        if (res.data.assBrunstrom=="00"){
                            assBrunstrom="弛缓期：无任何运动";
                        }else if(res.data.assBrunstrom=="01"){
                            assBrunstrom="痉挛阶段：仅有极少的随意运动";
                        }else if(res.data.assBrunstrom=="02"){
                            assBrunstrom="共同运动阶段：在坐和站位上，有髋、膝、踝的协同性屈曲";
                        }else if(res.data.assBrunstrom=="03"){
                            assBrunstrom="部分分离运动阶段：在坐位上，可屈膝90以上，可使足后滑到椅子下方。在足跟不离地的情况下能背屈踝";
                        }else if(res.data.assBrunstrom=="04"){
                            assBrunstrom="分离运动阶段：健腿站，患腿可先屈膝后伸髋；在伸直膝的情况下，可背屈踝，可将踵放在向前迈一小步的位置上";
                        }else if (res.data.assBrunstrom=="05"){
                            assBrunstrom="正常阶段：在站立位可使髋外展到超出抬起该侧骨盆所能达到的范围；在坐位上，在伸直膝的情况下可内外旋下肢，合并足的内外翻";
                        };
                        //Ashworth评估
                        let assAshworth="";
                        if (res.data.assAshworth=="00"){
                            assAshworth="0级：正常肌张力";
                        }else if(res.data.assAshworth=="01"){
                            assAshworth="1级：肌张力略微增加:受累部分被动屈伸时，在关节活动范围之末时呈现最小的阻力，或出现突然卡住和突然释放";
                        }else if(res.data.assAshworth=="02"){
                            assAshworth="1+级：肌张力轻度增加，在关节活动后50%范围内出现突然卡住，然后在关节活动范围后50%均呈现最小阻力";
                        }else if(res.data.assAshworth=="03"){
                            assAshworth="2级：肌张力较明显地增加，通过关节活动范围的大部分时，肌张力均较明显地增加,但受累部分仍能较容易地被移动";
                        }else if(res.data.assAshworth=="04"){
                            assAshworth="3级：肌张力严重增加，被动活动困难";
                        }else if (res.data.assAshworth=="05"){
                            assAshworth="4级：僵直，受累部分被动屈伸时呈现僵直状态，不能活动";
                        };
                        this.printData=[{
                            type:"关节活动度评估",
                            value:"髋关节屈伸:"+res.data.assHipMin+"~"+res.data.assHipMax+";膝关节屈伸:"+res.data.assKneeMin+"~"+res.data.assKneeMax+";踝关节背屈跖屈:"+res.data.assAnkleMin+"~"+res.data.assAnkleMax
                        },{
                            type:"肌力评估级别",
                            value:assMuscle
                        },{
                            type:"Brunstrom评估",
                            value:assBrunstrom
                        },{
                            type:"Ashworth评估",
                            value:assAshworth
                        }];
                        const oneForm={
                            assHipMin:res.data.assHipMin,
                            assHipMax:res.data.assHipMax,
                            assKneeMin:res.data.assKneeMin,
                            assKneeMax:res.data.assKneeMax,
                            assAnkleMin:res.data.assAnkleMin,
                            assAnkleMax:res.data.assAnkleMax,
                        };
                        const twoForm={
                            assMuscle:res.data.assMuscle
                        };
                        const threeForm={
                            assBrunstrom:res.data.assBrunstrom
                        };
                        const foreForm={
                            assAshworth:res.data.assAshworth
                        }
                        this.assesstableTabs=[
                            {
                                title: '关节活动度评估',
                                name: '1',
                                content: 'assessOneModel',
                                contentForm: oneForm
                            },
                            {
                                title: '肌力评估',
                                name: '2',
                                content:'assessTwoModel',
                                contentForm: twoForm
                            },
                            {
                                title: 'Brunnstrom评估',
                                name: '3',
                                content:'assessThreeModel',
                                contentForm: threeForm
                            },
                            {
                                title: 'Ashworth评估',
                                name: '4',
                                content:'assessForeModel',
                                contentForm: foreForm
                            }
                        ];
                    }
                });
                this.editVisible = true;
            },
            seeColse(){
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.editVisible = false;
                    })
                    .catch(() => {
                        this.$message({
                            message:'已取消操作'
                        });
                    });

            },
            //预览打印
            firstSee(){
                this.visible=true;
            },
            closeEdit(){//关闭编辑弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.visible=false;
                    })
                    .catch(() => {
                        this.$message({
                            message:'已取消操作'
                        });
                    });
            },
            /*表单重置*/
            resetForm(refname){
                if (this.$refs[refname] !== undefined){
                    this.$refs[refname].resetFields();
                }
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
        /*border-radius 属性允许您为元素添加圆角边框！*/
        border-radius:6px;
        background-clip:padding-box;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    /*头像上传*/
    .user-header{
        position: relative;
        display: inline-block;
    }
    .user-header-com{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: inline-block;
    }
    .header-upload-btn{
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
    }
</style>
